<template>
    <div>
        <div class="breadcrumb">
            <el-breadcrumb separator-class="el-icon-arrow-right">
                <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
                <el-breadcrumb-item>系统设置</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <hr style="border: 1px solid #F2F6FC;">
        <div class="system">
            <el-form :model="ruleForm" status-icon ref="ruleForm" label-width="100px" class="demo-ruleForm">
                <el-form-item label="最大迟到早退次数" prop="leTime" label-width="200px">
                    <el-input type="text" v-model="ruleForm.leTime" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="最大迟到请假次数" prop="leaveTime" label-width="200px">
                    <el-input type="text" v-model="ruleForm.leaveTime" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item style="text-align: center;">
                    <el-button type="primary" @click="submitForm(ruleForm)">保存</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>

<script>
import { alterSystemTime, getSystemTime } from '@/api/api'
export default {
  data () {
    return {
      ruleForm: {
        leTime: null,
        leaveTime: null
      }
    }
  },
  methods: {
    submitForm (ruleForm) {
      alterSystemTime(ruleForm.leTime, ruleForm.leaveTime).then(res => {
        console.log(res.data)
      })
    }
  },
  mounted () {
    getSystemTime().then(res => {
      // console.log(res.data)
      this.ruleForm.leTime = res.data.data.leTime
      this.ruleForm.leaveTime = res.data.data.leaveTime
    })
  }
}
</script>

<style lang="scss" scoped>
.system {
    width: 400px;
    height: 400px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}
</style>
